
import ProTable from '@ant-design/pro-table';
import type { ProColumns } from '@ant-design/pro-table';
import { Modal } from 'antd';
import React, { useState } from 'react';
import {ProductType,NormalListParam} from '../../model';
import request from '@/utils/request';
import { manufacturerOption,manufacturerOptionOnly } from '@/utils/utils';


export type ChooseProps = {
    onCancel: (flag?: boolean, formVals?: any) => void;
    onSubmit: (values: ProductType[]) => Promise<void>;
    modalVisible: boolean;
  };

  
const ProductChoose: React.FC<ChooseProps> = (props)=>{

    async function queryProduct(params: NormalListParam) {
      params.pageSize=1000;
      var data =  request('/xwyl/product/productData', {
        params,
      });
      return data;
    }

    const [selectedRowsState, setSelectedRows] = useState<ProductType[]>([]);
    const rowSelection = {
      onChange: (key:any, selectedRows:ProductType[]) => {
        setSelectedRows(selectedRows);
      }
    };
    const columns: ProColumns<ProductType>[] = [
      {
        title: '厂家',
        dataIndex: 'manufacturer',
        valueType:'select',
        valueEnum:manufacturerOption(),
        hideInSearch:true,
        width:100,
      },
      {
        title: '厂家',
        dataIndex: 'manufacturer',
        valueType:'select',
        hideInTable:true,
        valueEnum:manufacturerOptionOnly(),
        width:100
      },
        {
          title:'产品名称',
          dataIndex: 'product_name',
        },
        {
          title:"产品型号",
          dataIndex: 'product_standard',
        },
        {
          title: '单位',
          dataIndex: 'packing_unit',
          hideInSearch:true,
        },
      ];

    return (
      <Modal
        title="选择产品"
        width={1000}
        destroyOnClose={true}
        visible={props.modalVisible}
        onOk={()=>{
            props.onSubmit(selectedRowsState);
            setSelectedRows([]);
        }}
        onCancel={()=>{
            props.onCancel();
        }}
      >
        <ProTable<ProductType>
          headerTitle='产品列表'
          scroll={{ y: 300 }}
          toolBarRender={false}
          request={async(params, sorter, filter) =>queryProduct({ ...params, sorter, filter })}
          columns={columns}
          rowKey="id"
          pagination={false}
          search={{
              filterType: 'query',
              layout: 'horizontal',
          }}
          rowSelection={{
            type: "checkbox",
            ...rowSelection,
          }}
          />
      </Modal>
    );
}
export default ProductChoose;